<?xml version="1.0" encoding="UTF-8"?><d:tdl xmlns="http://www.w3.org/1999/xhtml" xmlns:b="http://www.backbase.com/2006/btl" xmlns:bb="http://www.backbase.com/2006/client"  xmlns:d="http://www.backbase.com/2006/tdl" >

	<d:namespace name="http://www.backbase.com/2006/btl">

		<d:resource type="text/css"><![CDATA[
			.btl-resize-cursorElement {
				position: absolute;
				top: -10000px;
				left: -10000px;
				width: 100px;
				height: 100px;
				z-index: 10000;
				opacity: 0;
				-ms-filter: "alpha(opacity=0)";
				filter: alpha(opacity=0);
				background: white;

			}
			.btl-resize-lineElement {
				position: absolute;
				top: -10000px;
				left: -10000px;
				width: 1px;
				height: 100px;
				z-index: 9999;
				border-width: 1px;
				border-style: solid;
				border-color: #8B8D91;
				overflow: hidden;
			}
			.btl-resize-outlineElement {
				position: absolute;
				top: -10000px;
				left: -10000px;
				width: 100px;
				height: 100px;
				z-index: 9999;
				border-width: 1px;
				border-style: solid;

				opacity:0.4;
				-ms-filter: "alpha(opacity=40)";
				filter: alpha(opacity=40);

				background-color: #DFE0E1;
				border-color: #8B8D91;
			}
		]]></d:resource>

		<d:behavior name="resizeBase">
			

			<d:resource type="text/javascript"><![CDATA[/**
 * <p>The btl.resize API object.</p>
 * <p>On this object you will find functionality to do custom resize action.</p>
 * @publish
 */
btl.resize = {};

btl.resize.currentSymbol 	= null;
btl.resize.currentElement 	= null;
btl.resize.currentController = null;
btl.resize.currentResizeEdge = 0;


/**
 * @property
 * Returns if the resizing is currently happening.
 * @publish
 * @type Boolean
 */
btl.resize.isResizing = false;

//resize edges constants
btl.resize.WEST		= btl.resize.LEFT 	= 0x1;
btl.resize.EAST 	= btl.resize.RIGHT 	= 0x2;
btl.resize.NORTH	= btl.resize.TOP  	= 0x4;
btl.resize.SOUTH	= btl.resize.BOTTOM	= 0x8;

btl.resize.NORTHWEST 					= 0x5;
btl.resize.NORTHEAST 					= 0x6;
btl.resize.SOUTHWEST					= 0x9;
btl.resize.SOUTHEAST					= 0xA;

btl.resize.HORIZONTAL 					= 0x3;
btl.resize.VERTICAL 					= 0xC;
btl.resize.ALL							= 0xF;


// Create the cursor patch element.
btl.resize.cursorElement = document.createElement('div');
btl.resize.cursorElement.className = 'btl-resize-cursorElement';
document.body.appendChild(btl.resize.cursorElement);

//Only required for Opera (fix cursor issue)
if( bb.browser.opera ) {
	btl.resize.iCursor = 0;
	btl.resize.aCursors = [ btl.resize.cursorElement ];
	btl.resize.aCursors[1] = btl.resize.cursorElement.cloneNode(true);
	document.body.appendChild( btl.resize.aCursors[1] );
}

// Create the resize visualization line.
btl.resize.lineElement = document.createElement('div');
btl.resize.lineElement.className = 'btl-resize-lineElement';
document.body.appendChild(btl.resize.lineElement);

// Create the outline visualization rectangle.
btl.resize.outlineElement = document.createElement('div');
btl.resize.outlineElement.className = 'btl-resize-outlineElement';
document.body.appendChild(btl.resize.outlineElement);

//PUBLIC API

/**
 * Function can detect if the coordinates provided are within the edge of an element.
 * @param {node} viewNode Specifies the node on which the function should check the edges.
 * @param {integer} clientX Specifies the (mouse) clientX coordinate it should use for detection.
 * @param {integer} clientY Specifies the (mouse) clientY coordinate it should use for detection.
 * @param {string} edges Specifies on which edges it should detect whether this is a space-separated string (containing, for example: 'north south' or 'top left').
 * @param {integer} gripSize Specifies how large the gripsize should be for the detection.
 * @return Returns an integer matching the corresponding edge, or 0 if the coordinates were not close to the edge.
 * @type integer
 * @example behavior:behavior_resize_custom_table
 * @publish
 */
btl.resize.detectResizeEdge = function resize_detectEdge( oElement, iClientX, iClientY, sEdges, iGripSize ) {

	var aCoordinates = bb.html.getBoxObject( oElement );
	var iLocalX = iClientX - aCoordinates.left;
	var iLocalY = iClientY - aCoordinates.top;
	var reEdges = new RegExp( sEdges.replace(/(^\s+)|(\s+$)/g,'').replace(/ +/g,'|'),'');
	var iResizeMode = 0;
	// Check if cursor is inside element dimensions.
	if(iLocalX >= 0 && iLocalY >= 0 && iLocalX <= aCoordinates.width && iLocalY <= aCoordinates.height) {
		// Check if cursor is in a grippy area.
		if( (reEdges.test('top') || reEdges.test('north')) && iLocalY <= iGripSize){
			iResizeMode |= btl.resize.TOP;
		}
		else if( (reEdges.test('bottom') || reEdges.test('south')) && iLocalY >= (aCoordinates.height - iGripSize)) {
			iResizeMode |= btl.resize.BOTTOM;
		}
		if( (reEdges.test('left') || reEdges.test('west')) && iLocalX <= iGripSize) {
			iResizeMode |= btl.resize.LEFT;
		}
		else if( (reEdges.test('right') || reEdges.test('east')) && iLocalX >= (aCoordinates.width - iGripSize)) {
			iResizeMode |= btl.resize.RIGHT;
		}
	}
	btl.resize.currentResizeEdge = iResizeMode;
	return iResizeMode;
};


/**
 * Function that starts a resize operation.
 * @param {controller} Specifies the controller node on which the 'resizeStart', 'resize', and 'resizeEnd' events should be fired.
 * @param {node} viewNode Specifies the node that is actually resized.
 * @param {integer} resizeEdge Specifies the edge that should be resized. This value can be gathered from the 'detectResizeEdge' function.
 * @param {integer} clientX Specifies the (mouse) clientX coordinate that should be used as the start point.
 * @param {integer} clientY Specifies the (mouse) clientY coordinate that should be used as the start point.
 * @param {node} symbol Specifies the node to be used as the symbol (for example a line or outline), and provides the same node as the second argument for 'real' (direct) resizing.
 * @param {integer} minWidth Specifies the minimal width for the resize element.
 * @param {integer} minHeight Specifies the minimal height for the resize element.
 * @param {integer} maxWidth Specifies the maximal width for the resize element.
 * @param {integer} maxHeight Specifies the maximal height for the resize element.
 * @param {node} constraint Specifies an optional viewNode that is used as the constraint. The resize cannot go beyond the edges of this element.
 * @return Returns if the default is prevented from the resizeStart event.
 * @type boolean
 * @example behavior:behavior_resize_custom_table
 * @example behavior:behavior_resize_custom_grippy
 * @publish
 */
btl.resize.startResize = function resize_startResize( oController, oElement, iResizeMode, iClientX, iClientY, oSymbol, iMinW, iMinH, iMaxW, iMaxH, oConstraint ) {

	// Set properties of resize object.
	btl.resize.currentController = oController;
	btl.resize.currentElement = oElement || oController.viewNode;
	btl.resize.currentSymbol = oSymbol;
	btl.resize.currentResizeEdge = iResizeMode;

	var	bBorderBox = bb.html.getStyle( btl.resize.currentElement, 'box-sizing') == 'border-box',
		aBCoor = bb.html.getBoxObject( btl.resize.currentElement, 'border'),
		aCCoor;
	if (!bBorderBox) {
		aCCoor = bb.html.getBoxObject( btl.resize.currentElement, 'content');
	}

	//Initial setup of the coordinates
	btl.resize.newX = btl.resize.originalX = aBCoor.left;
	btl.resize.newY = btl.resize.originalY = aBCoor.top;
	btl.resize.newW = btl.resize.originalW = bBorderBox ? aBCoor.width : aCCoor.width;
	btl.resize.newH = btl.resize.originalH = bBorderBox ? aBCoor.height : aCCoor.height;

	btl.resize.boxModelW =  bBorderBox ? 0 : aBCoor.width - aCCoor.width;
	btl.resize.boxModelH =  bBorderBox ? 0 : aBCoor.height - aCCoor.height;

	btl.resize.deltaX = 0;
	btl.resize.deltaY = 0;

	btl.resize.offsetLeft 	= 0;
	btl.resize.offsetTop 	= 0;

	//The point it all started from
	btl.resize.originalClientX = iClientX;
	btl.resize.originalClientY = iClientY;
	var bReturn = btl.resize.sendEvent(oController, 'resizeStart', true, true);
	if( bReturn ){

		// Register document level event listeners for mousemove, mouseup and keydown.
		bb.document.addEventListener('mousemove', btl.resize.handleMouseMove, false);
		bb.document.addEventListener('mouseup', btl.resize.handleMouseUp, false);
		bb.document.addEventListener('keydown', btl.resize.handleKeyDown, false);
		bb.document.addEventListener('click',	btl.resize.handleClick, false);

		bb.html.disableUserSelect(document.body);

		btl.resize.iMinW = iMinW || 0;
		btl.resize.iMinH = iMinH || 0;
		btl.resize.iMaxW = iMaxW || 20000;
		btl.resize.iMaxH = iMaxH || 20000;

		btl.resize.oConstraint = oConstraint || false;

		if (oSymbol && oSymbol != oElement) {
			//Show the symbol
			oSymbol.style.display = '';
			btl.resize.applyCoordinates(oSymbol, true); //Force it!
		}
		//We are resizing!
		btl.resize.isResizing = true;
	}
	return bReturn;
};

/**
 * Function that resets the original coordinates by canceling the resize.
 * @return Nothing
 * @type void
 * @publish
 */
btl.resize.cancelResize = function cancelResize() {
	btl.resize.newX = btl.resize.originalX;
	btl.resize.newY = btl.resize.originalY;
	btl.resize.newW = btl.resize.originalW;
	btl.resize.newH = btl.resize.originalH;
};


/**
 * Function that stops the resize by firing the resizeEnd event.
 * @return Nothing
 * @type void
 * @publish
 */
btl.resize.stopResize = function resize_stopResize(oEvent) {
	if (btl.resize.isResizing) {
		// Create and dispatch the resizeEnd event.
		var oElement = btl.resize.currentController;
		var bReturn = btl.resize.sendEvent(oElement, 'resizeEnd', true, true, oEvent);
		if( ! bReturn ){

			btl.resize.cancelResize();

			if(btl.resize.currentElement == btl.resize.currentSymbol) { //rollback real resizing
				btl.resize.applyCoordinates(btl.resize.currentElement);
			}
		}

		// Cleanup
		btl.resize.stopAndClean();

		bb.ui.reflow( oElement, false, true);

		return bReturn;
	}
};

// Set properties of resize object.
/**
 * Function that sets the resized coordinates on a certain element.
 * @param {node} viewNode Specifies the node to which the resized coordinates should be applied. This can be either a symbol or the real resized element.
 * @param {boolean} force Specifies whether the coordinates must be forced, although the edge of that coordinate is not changed.
 * @return Nothing
 * @type void
 * @publish
 */
btl.resize.applyCoordinates = function(oElement, bForce){
	if ( oElement ){
		var iNewX = btl.resize.newX;
		var iNewY = btl.resize.newY;
		if (oElement.offsetParent && oElement.offsetParent != document.body) {
			var oCoord = bb.html.getBoxObject(oElement.offsetParent, bb.html.getStyle(oElement, 'position') == 'absolute' ? 'padding' : 'content');
			iNewX -= oCoord.left;
			iNewY -= oCoord.top;
		}
		var oStyle = oElement.style;
		//Check for the reflow / calculation stuff
		if ( btl.resize.currentController && btl.resize.currentController.viewNode == oElement && btl.resize.currentController.instanceOf(btl.namespaceURI, 'dimensionElement') ) {
			var oController = btl.resize.currentController;
			if(bForce || btl.resize.currentResizeEdge & btl.resize.LEFT ) 			oStyle.left = iNewX + 'px';
			if(bForce || btl.resize.currentResizeEdge & btl.resize.TOP ) 			oStyle.top  = iNewY + 'px';
			if(bForce || btl.resize.currentResizeEdge & btl.resize.HORIZONTAL ) 	oController.setProperty('width', btl.resize.newW + 'px');
			if(bForce || btl.resize.currentResizeEdge & btl.resize.VERTICAL ) 		oController.setProperty('height', btl.resize.newH + 'px');
		} else {
			var iNewW = btl.resize.newW;
			var iNewH = btl.resize.newH;
			//It's the symbol and content-box model, we need to correct possible the width / height
			if (btl.resize.currentElement != oElement && bb.html.getStyle( oElement, 'box-sizing') == 'content-box') {
				var oSymBCoord = bb.html.getBoxObject(oElement, 'border');
				var oSymCCoord = bb.html.getBoxObject(oElement, 'content');
				iNewW += btl.resize.boxModelW - (oSymBCoord.width - oSymCCoord.width);
				iNewH += btl.resize.boxModelH - (oSymBCoord.height - oSymCCoord.height);
			}
			if(bForce || btl.resize.currentResizeEdge & btl.resize.LEFT ) 			oStyle.left = iNewX + 'px';
			if(bForce || btl.resize.currentResizeEdge & btl.resize.TOP )			oStyle.top  = iNewY + 'px';
			if(bForce || btl.resize.currentResizeEdge & btl.resize.HORIZONTAL )	oStyle.width = iNewW + 'px';
			if(bForce || btl.resize.currentResizeEdge & btl.resize.VERTICAL ) 		oStyle.height = iNewH + 'px';
		}
	}
};

//
/**
 * This function checks the coordinates (on mousemove) and applies the constraint (either max / min or height / width).
 * @param {integer} clientX Specifies the (mouse) clientX coordinate to be used for calculation.
 * @param {integer} clientY Specifies the (mouse) clientY coordinate to be used for calculation.
 * @return Nothing
 * @type void
 * @publish
 */
btl.resize.determineCoordinates = function(iClientX, iClientY){

	var iResizeMode = btl.resize.currentResizeEdge;

	var iMinW = btl.resize.iMinW;
	var iMinH = btl.resize.iMinH;

	// Calculate the size of the change.
	btl.resize.deltaX = iClientX - btl.resize.originalClientX;
	btl.resize.deltaY = iClientY - btl.resize.originalClientY;

	var oCoord;
	var bAbsolute = bb.html.getStyle(btl.resize.currentElement, 'position') == 'absolute';
	if( btl.resize.oConstraint ) {
		oCoord = bb.html.getBoxObject( btl.resize.oConstraint == document.body ? bb.viewport : btl.resize.oConstraint, bAbsolute ? 'padding' : 'content');
	}

	btl.resize.offsetLeft 	= 0;
	btl.resize.offsetTop 	= 0;
	if (btl.resize.currentElement.offsetParent && btl.resize.currentElement.offsetParent != document.body) {
		var oCoord2 = bb.html.getBoxObject(btl.resize.currentElement.offsetParent, bAbsolute ? 'padding' : 'content');
		btl.resize.offsetLeft 	= oCoord2.left;
		btl.resize.offsetTop	= oCoord2.top;
	}
	var oViewPort = bb.html.getBoxObject(bb.viewport);
	// Determine new width and left position.
	if( iResizeMode & btl.resize.HORIZONTAL ){

		var iNewW = btl.resize.originalW;
		var iNewX = btl.resize.originalX;

		if (iResizeMode & btl.resize.RIGHT)
			iNewW += btl.resize.deltaX;
		else if(iResizeMode & btl.resize.LEFT)
			iNewW -= btl.resize.deltaX;

		//Getting the minimal value
		iNewW = Math.max(iNewW, iMinW, 1);

		//Getting the maximal value
		iNewW = Math.min(iNewW, btl.resize.iMaxW, Math.max(oViewPort.width, bb.viewport.scrollWidth) );

		if(iResizeMode & btl.resize.LEFT) iNewX -= (iNewW - btl.resize.originalW);

		if(iNewX < 0) iNewX = 0;

		//check constraint
		if ( btl.resize.oConstraint ){

			if( iResizeMode & btl.resize.RIGHT && iResizeMode & btl.resize.LEFT ) {
				iNewX = oCoord.left;
				iNewW = Math.min(iNewW, btl.resize.iMaxW, oCoord.width);
			} else {

				if( iNewX < oCoord.left) {
					iNewW -= oCoord.left - iNewX;
					iNewX = oCoord.left;
				} else if( iNewX > (oCoord.left + oCoord.width - iMinW)){
					iNewX = (oCoord.left + oCoord.width - iMinW);
				}

				var iMaxWidth = oCoord.left + oCoord.width - iNewX - btl.resize.boxModelW;
				if(iNewW < iMinW) iNewW = iMinW;
				else if ( iNewW > iMaxWidth) iNewW = iMaxWidth;
			}
		}

		btl.resize.newX = iNewX;
		btl.resize.newW = iNewW;
	}

	// Determine new height and top position.
	if( iResizeMode & btl.resize.VERTICAL ){

		var iNewH = btl.resize.originalH;
		var iNewY = btl.resize.originalY;

		if( iResizeMode & btl.resize.BOTTOM)
			iNewH += btl.resize.deltaY;
		else if( iResizeMode & btl.resize.TOP)
			iNewH -= btl.resize.deltaY;


		//Getting the minimal value
		iNewH = Math.max(iNewH, iMinH, 1);

		//Getting the maximal value
		iNewH = Math.min(iNewH, btl.resize.iMaxH, Math.max(oViewPort.height, bb.viewport.scrollHeight) );


		if( iResizeMode & btl.resize.TOP) iNewY -= (iNewH - btl.resize.originalH);

		if(iNewY < 0) iNewY = 0;

		//check constraint
		if ( btl.resize.oConstraint ){
			//Resizing 2 @ the same time, only possible with minimize etc...
			if( iResizeMode & btl.resize.TOP && iResizeMode & btl.resize.BOTTOM ) {
				iNewY = oCoord.top;
				iNewH = Math.min(iNewH, btl.resize.iMaxH, oCoord.height);
			} else {

				if( iNewY < oCoord.top) {
					iNewH -= oCoord.top - iNewY;
					iNewY = oCoord.top;
				} else if( iNewY > (oCoord.top + oCoord.height - iMinH)) {
					iNewY = (oCoord.top + oCoord.height - iMinH);
				}

				var iMaxHeight = oCoord.top + oCoord.height - iNewY - btl.resize.boxModelH;
				if ( iNewH > iMaxHeight) iNewH = iMaxHeight;
				if(iNewH < iMinH) iNewH = iMinH;
			}
		}
		btl.resize.newY = iNewY;
		btl.resize.newH = iNewH;
	}

}


//PRIVATE API

//===================================== btl.resize.sendEvent ==========================================
// Utility for creating, initiating and dispatching events.
btl.resize.sendEvent = function sendEvent(oElement, sType, bBubble, bCancel, oEvent){

	if (oEvent) {
		var oNewEvent = bb.document.createEvent('MouseEvents');
		oNewEvent.initMouseEvent(sType, Boolean(bBubble), Boolean(bCancel), oEvent.view, oEvent.detail, oEvent.screenX, oEvent.screenY, oEvent.clientX, oEvent.clientY, oEvent.ctrlKey, oEvent.altKey, oEvent.shiftKey, oEvent.metaKey, oEvent.button, oEvent.relatedTarget)
		oNewEvent.pageX = oEvent.pageX;
		oNewEvent.pageY = oEvent.pageY;
		oNewEvent.viewTarget = oEvent.viewTarget;
	} else {
		var oNewEvent = bb.document.createEvent('Events');
		oNewEvent.initEvent(String(sType), Boolean(bBubble), Boolean(bCancel));
	}

	//Calculate the edges
	oNewEvent.resizeEdge = btl.resize.currentResizeEdge;
	var aEdges = [];
	if (btl.resize.currentResizeEdge & btl.resize.VERTICAL)		aEdges.push('vertical');
	if (btl.resize.currentResizeEdge & btl.resize.HORIZONTAL)	aEdges.push('horizontal');
	if (btl.resize.currentResizeEdge & btl.resize.LEFT)  		aEdges.push('left');
	if (btl.resize.currentResizeEdge & btl.resize.TOP)  		aEdges.push('top');
	if (btl.resize.currentResizeEdge & btl.resize.RIGHT)  		aEdges.push('right');
	if (btl.resize.currentResizeEdge & btl.resize.BOTTOM)  		aEdges.push('bottom');
	oNewEvent.resizeEdges = aEdges.length ? aEdges.join(' ') : 'none';

	oNewEvent.originalLeft = this.originalX;
	oNewEvent.originalTop = this.originalY;
	oNewEvent.originalWidth = this.originalW;
	oNewEvent.originalHeight = this.originalH;

	oNewEvent.newLeft = this.newX;
	oNewEvent.newTop = this.newY;
	oNewEvent.newWidth = this.newW;
	oNewEvent.newHeight = this.newH;

	oNewEvent.deltaX = this.deltaX;
	oNewEvent.deltaY = this.deltaY;

	oNewEvent.offsetLeft = this.offsetLeft;
	oNewEvent.offsetTop	= this.offsetTop;

	oElement.dispatchEvent(oNewEvent);

	return !oNewEvent.defaultPrevented;
};

//===================================== btl.resize.stopAndClean ==========================================
// Some cleanup is needed when the resize action ends.
btl.resize.stopAndClean = function resize_stopAndClean(){
	if( btl.resize.isResizing ){

		bb.document.removeEventListener('mouseup', btl.resize.handleMouseUp, false);
		bb.document.removeEventListener('mousemove', btl.resize.handleMouseMove, false);
		bb.document.removeEventListener('keydown', btl.resize.handleKeyDown, false);
		bb.document.removeEventListener('click', btl.resize.handleClick, false);

		bb.html.enableUserSelect(document.body);

		//Hide the symbol
		if ( btl.resize.currentSymbol && btl.resize.currentSymbol != btl.resize.currentElement) {
			btl.resize.currentSymbol.style.display = 'none';
		}

		btl.resize.outlineElement.style.top = '-10000px';
		btl.resize.lineElement.style.top = '-10000px';

		btl.resize.currentSymbol = null;
		btl.resize.currentElement = null;
		btl.resize.currentController = null;
		btl.resize.currentResizeEdge = 0;

		btl.resize.isResizing = false;
	}
};

//===================================== btl.resize.positionCursorPatch ==========================================
// Takes care of cursor visualization.
btl.resize.positionCursor = function positionCursor(oController, iX, iY, sCursor){

	iX = (iX > bb.viewport.scrollWidth - 50 ? bb.viewport.scrollWidth  - 50 : iX) - 50;
	iY = (iY > bb.viewport.scrollHeight - 50 ? bb.viewport.scrollHeight  - 50 : iY) - 50;

	if (sCursor && sCursor != btl.resize.cursorElement.style.cursor) {
		if( bb.browser.opera ) {
			btl.resize.cursorElement.style.left = '-100px';
			btl.resize.cursorElement.style.top = '-100px';
			btl.resize.cursorElement = btl.resize.aCursors[ btl.resize.iCursor = ++btl.resize.iCursor % 2];
		}
		btl.resize.cursorElement.style.cursor = sCursor;
	}
	btl.resize.cursorElement.style.left = iX + 'px';
	btl.resize.cursorElement.style.top = iY + 'px';

	//btl.resize.cursorElement.style.background = 'red';

	// Make sure events keep flowing correctly to the resized element.
	btl.resize.cursorElement.controller = oController;
};




// Handler for mousemove.
btl.resize.handleMouseMove = function handleMouseMove(event){

	var oOld = {
		newX: btl.resize.newX,
		newY: btl.resize.newY,
		newW: btl.resize.newW,
		newH: btl.resize.newH
	};

	//Do calculation (max / min, constraint)
	btl.resize.determineCoordinates(event.pageX, event.pageY);

	// Create and dispatch the resize event.
	if( btl.resize.sendEvent(btl.resize.currentController, 'resize', false, true, event)) {

		// Visualize the resize action if the default has not been prevented.
		btl.resize.applyCoordinates(btl.resize.currentSymbol);

		if(btl.resize.currentSymbol == btl.resize.currentElement)
			bb.ui.reflow( btl.resize.currentController, false, true);

	} else {
		btl.resize.newX = oOld.newX;
		btl.resize.newY = oOld.newY;
		btl.resize.newW = oOld.newW;
		btl.resize.newH = oOld.newH;
	}
};
// Handler for mouseup.
btl.resize.handleMouseUp = function resize_handleMouseUp(oEvent){
	if(oEvent.button == 0){
		oEvent.preventDefault();
		oEvent.stopImmediatePropagation();
		// Create and dispatch the resizeEnd event.
		btl.resize.stopResize(oEvent);
	}
};
// Handler for click
btl.resize.handleClick = function handleClick(oEvent){
	if(oEvent.button == 0){
		oEvent.stopImmediatePropagation();
		oEvent.preventDefault();
		bb.document.removeEventListener('click', arguments.callee, true);
	}
};
// Handler for keydown.
btl.resize.handleKeyDown = function handleKeyDown(oEvent){
	// If escape is pressed, cancel the resize action.
	if(oEvent.keyIdentifier == 'U+001B'){
		oEvent.preventDefault();

		var oElement = btl.resize.currentController;

		btl.resize.cancelResize();

		// Create and dispatch the resizeEnd event.
		btl.resize.sendEvent(oElement, 'resizeEnd', true, true)

		if(btl.resize.currentElement == btl.resize.currentSymbol) { //rollback real resizing
			btl.resize.applyCoordinates(btl.resize.currentElement);
		}
		// Cleanup
		btl.resize.stopAndClean();
	}
};]]></d:resource>
		</d:behavior>

		<d:behavior name="resize" extends="b:resizeBase">
			

			

			

			

			<d:attribute name="resizeEdges" default="left top right bottom">
				
			</d:attribute>
			<d:attribute name="resizeGripSize" default="8">
				
			</d:attribute>
			<d:attribute name="resizeType" default="outline">
				
			</d:attribute>
			<d:attribute name="resizeConstraint">
				
			</d:attribute>

			<d:property name="resizeConstraint">
				<d:getter type="text/javascript"><![CDATA[
					var	sXpath = this.getAttribute('resizeConstraint')
					if(sXpath && (sXpath != '')) {
						var oConstraint = bb.evaluateSmart(sXpath, this, this);
						return oConstraint? oConstraint.viewGate : null;
					}
				]]></d:getter>
			</d:property>

			<d:attribute name="resizeMinWidth" default="10px">
				
			</d:attribute>
			<d:attribute name="resizeMinHeight" default="10px">
				
			</d:attribute>

			<d:attribute name="resizeMaxWidth">
				
			</d:attribute>

			<d:attribute name="resizeMaxHeight">
				
			</d:attribute>

			<d:attribute name="minimized" default="false" onchange="this.setProperty(name, btl.isTrueValue(name, value))">
				
			</d:attribute>

			<d:attribute name="maximized" default="false" onchange="this.setProperty(name, btl.isTrueValue(name, value))">
				
			</d:attribute>

			<d:property name="resizable">
				
				<d:getter type="text/javascript"><![CDATA[
					return (this._['_resizable'] === false ? false : true);
				]]></d:getter>
			</d:property>

			<d:property name="minimized" type="boolean">
				
				<d:setter type="text/javascript"><![CDATA[
					if (value) {
						this.minimize();
					} else if (this._._minimized) {
						this.restore();
					}
				]]></d:setter>
				<d:getter type="text/javascript"><![CDATA[
					return btl.isTrueValue('minimized', this.getAttribute('minimized') )
				]]></d:getter>
			</d:property>

			<d:property name="maximized" type="boolean">
				
				<d:setter type="text/javascript"><![CDATA[
					if( value ){
						this.maximize();
					} else if( this._._maximized ){
						this.restore();
					}
				]]></d:setter>
				<d:getter type="text/javascript"><![CDATA[
					return btl.isTrueValue('maximized', this.getAttribute('maximized'));
				]]></d:getter>
			</d:property>

			<d:property name="restoreCoordinates">
				
			</d:property>

			<d:method name="maximize">
				
				<d:body type="text/javascript"><![CDATA[
					if( btl.resize.isResizing || (!this._._minimized && this._._maximized) || this.getAttribute('resizeType') == 'abstract')
						return;

					btl.resize.startResize(
						this,
						this.viewNode,
						btl.resize.ALL,
						0,
						0,
						this.viewNode,
						parseInt( this.getAttribute('resizeMinWidth') || '0', 10),
						parseInt( this.getAttribute('resizeMinHeight') || '0', 10),
						parseInt( this.getAttribute('resizeMaxWidth') || '0', 10),
						parseInt( this.getAttribute('resizeMaxHeight') || '0', 10),
						this.getProperty('resizeConstraint') || this.viewNode.offsetParent
					);

					if( btl.resize.isResizing ) {

						var oRestore = {
							left: btl.resize.originalX,
							top: btl.resize.originalY,
							width: btl.resize.originalW,
							height: btl.resize.originalH
						};

						btl.resize.determineCoordinates(10000, 10000);
						btl.resize.applyCoordinates(this.viewNode);

						var bMinimized = this._._minimized;
						var bMaximized = this._._maximized;

						//Used for the reflow
						this._._isCurrentlyMaximized = true;
						this._._minimized = false;
						this._._maximized = true;

						if( btl.resize.stopResize() ){

							this._._resizable = false;

							if (!bMinimized && !bMaximized)
								this.setProperty('restoreCoordinates', oRestore);
							this.setAttribute('minimized', 'false');
							this.setAttribute('maximized', 'true');

						} else {
							this._._minimized = bMinimized;
							this._._maximized = bMaximized;
						}
						this._._isCurrentlyMaximized = false;
					}
				]]></d:body>
			</d:method>

			<d:method name="restore">
				
				<d:body type="text/javascript"><![CDATA[
					if (this._._minimized && this._._maximized) {
						this._._maximized = false;
						return this.maximize();
					}

					if(btl.resize.isResizing || !(Boolean(this._._minimized) ^ Boolean(this._._maximized)) || this.getAttribute('resizeType') == 'abstract')
						return;


					var oRestore = this.getProperty('restoreCoordinates');
					if( !oRestore )
						return;

					btl.resize.startResize(
						this,
						this.viewNode,
						btl.resize.ALL,
						0,
						0,
						this.viewNode,
						parseInt( this.getAttribute('resizeMinWidth') || '0', 10),
						parseInt( this.getAttribute('resizeMinHeight') || '0', 10),
						parseInt( this.getAttribute('resizeMaxWidth') || '0', 10),
						parseInt( this.getAttribute('resizeMaxHeight') || '0', 10),
						this.getProperty('resizeConstraint') || this.viewNode.offsetParent
					);

					if( btl.resize.isResizing ) {

						btl.resize.newX = oRestore.left;
						btl.resize.newY = oRestore.top;
						btl.resize.newW = oRestore.width;
						btl.resize.newH = oRestore.height;

						btl.resize.applyCoordinates(this.viewNode);

						var bMinimized = this._._minimized;
						var bMaximized = this._._maximized;

						this._._minimized = false;
						this._._maximized = false;

						if( btl.resize.stopResize() ){

							this._._resizable = true;

							this.setAttribute('minimized', 'false');
							this.setAttribute('maximized', 'false');

							this.setProperty('restoreCoordinates', null);
						} else {
							this._._minimized = bMinimized;
							this._._maximized = bMaximized;
						}
					}
				]]></d:body>
			</d:method>

			<d:method name="minimize">
				
				<d:body type="text/javascript"><![CDATA[
					if( btl.resize.isResizing || this._._minimized || this.getAttribute('resizeType') == 'abstract')
						return;

					btl.resize.startResize(
						this,
						this.viewNode,
						btl.resize.RIGHT | btl.resize.BOTTOM,
						0,
						0,
						this.viewNode,
						parseInt( this.getAttribute('resizeMinWidth') || '0', 10),
						parseInt( this.getAttribute('resizeMinHeight') || '0', 10),
						parseInt( this.getAttribute('resizeMaxWidth') || '0', 10),
						parseInt( this.getAttribute('resizeMaxHeight') || '0', 10),
						this.getProperty('resizeConstraint') || this.viewNode.offsetParent
					);

					if( btl.resize.isResizing ) {

						var oRestore = {
							left: btl.resize.originalX,
							top: btl.resize.originalY,
							width: btl.resize.originalW,
							height: btl.resize.originalH
						};

						btl.resize.determineCoordinates(-10000, -10000);
						this._._minimized = true;
						btl.resize.applyCoordinates(this.viewNode);

						if( btl.resize.stopResize() ){

							this._._resizable = false;

							if (!this._._maximized)
								this.setProperty('restoreCoordinates', oRestore);
							this.setAttribute('minimized', 'true');

						} else {
							this._._minimized = false;
						}
					}
				]]></d:body>
			</d:method>

			<d:handler event="reflow" type="text/javascript"><![CDATA[
				if(!this._._isCurrentlyMaximized && this._._maximized && !this._._minimized) {
					this._._minimized = true;
					this._._maximized = false;
					this.maximize();
					this._._minimized = false;
				}
			]]></d:handler>

			<d:handler event="construct" type="text/javascript"><![CDATA[
				this._._resizable = true;
				bb.ui.reflow.add( this );
			]]></d:handler>

			<d:handler event="mouseleave" type="text/javascript"><![CDATA[
				if(btl.resize.isResizing) return;
				btl.resize.currentResizeEdge = 0;
				btl.resize.positionCursor(null, -100, -100);
			]]></d:handler>

			<d:handler event="mousedown" type="text/javascript"><![CDATA[
				if (!btl.resize.isResizing && event.button == 0 && btl.resize.currentResizeEdge > 0) {

					event.stopImmediatePropagation();
					event.preventDefault();

					var oElement = this;

					// Visualize the resize action.
					var oSymbol;
					 switch( this.getAttribute('resizeType') ){
						 case 'abstract':
							 // do nothing
							 break;
						 case 'real':
							 oSymbol = this.viewNode;
							 break;
						 case 'line':
							 //turn off some borders
							 oSymbol = btl.resize.lineElement;
							 oSymbol.style.borderLeftStyle 		= btl.resize.currentResizeEdge & btl.resize.LEFT ? 'solid' : 'none';
							 oSymbol.style.borderRightStyle 	= btl.resize.currentResizeEdge & btl.resize.RIGHT ? 'solid' : 'none';
							 oSymbol.style.borderTopStyle 		= btl.resize.currentResizeEdge & btl.resize.TOP ? 'solid' : 'none';
							 oSymbol.style.borderBottomStyle 	= btl.resize.currentResizeEdge & btl.resize.BOTTOM ? 'solid' : 'none';
							 break;
						 case 'outline':
						 default:
							 oSymbol = btl.resize.outlineElement;
					}

					btl.resize.startResize(
						this,
						this.viewNode,
						btl.resize.currentResizeEdge,
						event.pageX,
						event.pageY,
						oSymbol,
						parseInt( this.getAttribute('resizeMinWidth') || '0', 10),
						parseInt( this.getAttribute('resizeMinHeight') || '0', 10),
						parseInt( this.getAttribute('resizeMaxWidth') || '0', 10),
						parseInt( this.getAttribute('resizeMaxHeight') || '0', 10),
						this.getProperty('resizeConstraint')
					);
				}
			]]></d:handler>

			<d:handler event="mousemove" type="text/javascript"><![CDATA[

				if(btl.resize.isResizing) return;

				if(this != event.target || !this.getProperty('resizable')) return;

				var sResizeEdges = this.getAttribute('resizeEdges');

				if(this.getAttribute('resizeType') != 'abstract'){
					//Fix for element which are not absolute they should not be resized on top / left
					var sPosition = bb.html.getStyle( this.viewNode, 'position');
					if ( !sPosition || sPosition == 'static') // inhibit top and left borders
						sResizeEdges = sResizeEdges.replace(/top|left/g, '')
				}
				// grip size
				var iGripSize = parseInt( this.getAttribute('resizeGripSize') || '0', 10);

				var iResizeEdge = btl.resize.detectResizeEdge(this.viewNode, event.pageX, event.pageY, sResizeEdges, iGripSize);

				if ( iResizeEdge ) {

					//Calculate the actual cursor needed
					var aCursor = [];
					if (iResizeEdge & btl.resize.TOP)  		aCursor.push('n');
					if (iResizeEdge & btl.resize.BOTTOM)  	aCursor.push('s');
					if (iResizeEdge & btl.resize.RIGHT)		aCursor.push('e');
					if (iResizeEdge & btl.resize.LEFT)  	aCursor.push('w');
					aCursor.push('-resize');

					//Position the cursor correctly
					btl.resize.positionCursor(this, event.pageX, event.pageY, aCursor.join(''));

				} else {
					// Hide cursor patch
					btl.resize.positionCursor(null, -100, -100);
				}

			]]></d:handler>

			<d:handler event="resize" type="text/javascript"><![CDATA[
				//Place the cursor
				btl.resize.positionCursor(btl.resize.currentController,  event.pageX, event.pageY);
			]]></d:handler>

			<d:handler event="resizeEnd" type="text/javascript"><![CDATA[
				if(this.getAttribute('resizeType') != 'abstract')
					btl.resize.applyCoordinates( btl.resize.currentElement );
				btl.resize.positionCursor(null, -100, -100);
			]]></d:handler>

			<d:handler event="DOMNodeInsertedIntoDocument" type="text/javascript"><![CDATA[
				if( btl.isTrueValue( 'maximized', this.getAttribute('maximized'))){
					this.maximize();
				} else if( btl.isTrueValue( 'minimized', this.getAttribute('minimized'))){
					this.minimize();
				}
			]]></d:handler>
		</d:behavior>
	</d:namespace>
</d:tdl>